/**
 * @module  预约
 * @author xiong sha
 * @date 2020-12-23 13:31:26
 */

import React, { useState, useEffect } from 'react';
import { RouteComponentProps } from 'react-router';
import HeaderComponent from '@src/pages/components/Header';
// import { DatePicker, List, Checkbox, Toast, Button } from 'antd-mobile';
import request from '@src/utils/request';
import moment from 'moment';
import './index.less';

// const CheckboxItem = Checkbox.CheckboxItem;
// const AgreeItem = Checkbox.AgreeItem;

// interface IList {
//   id: number;
//   price: string;
//   title: string;
//   type: string;
// }
const AppointmentNew: React.FC<RouteComponentProps> = (props: RouteComponentProps) => {
  const [date, setDate] = useState<number[]>([]);

  const getDates = () => {
    // 获取未来五天的时间
    const today = new Date().valueOf();
    const mile = 24 * 60 * 60 * 1000; // 一天的毫秒数
    const dateList: number[] = [];
    for (let i = 0; i <= 5; i++) {
      dateList.push(i * mile + today);
    }
    setDate(dateList);
  };

  useEffect(() => {
    getDates();
  }, []);

  return (
    <div className="appointment-new">
      <HeaderComponent text="预约" />
      <ul className="date">
        {date.map((cur, index) => {
          return (
            <li className="date-list activr-list" key={cur}>
              <p>{index === 0 ? '今天' : `周${moment(cur).day()}`}</p>
              {moment(cur).format('MM/DD')}
            </li>
          );
        })}
      </ul>
      <footer className="footer">
        <div className="money">
          ¥<span className="price">600</span>
        </div>
        <div className="submit">提交按钮</div>
      </footer>
    </div>
  );
};

export default AppointmentNew;
